<template>
  <view>
    <view class="subject">
      <view class="subject-header flex align-center justify-between">
        <view>
          <view class="tagStats">
            <text v-if="info.type_ == '1'">判断题</text>
            <text v-if="info.type_ == '2'">单选题</text>
            <text v-if="info.type_ == '3'">多选题</text>
          </view>
        </view>
        <view>
          <slot name="no"></slot>
        </view>
      </view>
      <view class="content">
        <view class="title" :style="{ fontSize: topfontsize + 'rpx', fontWeight: weight }">
          {{ info.index }}、{{ info.question_ }}
        </view>
        <view v-if="info.question_image">
          <image :src="info.question_image" @click="bigimg" mode="widthFix" class="content_img"></image>
        </view>
        <view class="radios">
          <view class="cell" v-for="(item, index) in info.options" v-if="item.options_name != null && item.options_name != ''"
            :key="index" @click="radioChange(index + 1)">
            <!-- 题库 -->
            <view v-if="!examin">
              <!-- 单选判断 -->
              <view v-if="info.type_ == '1' || info.type_ == '2'">
                <view>
                  <view class="no_select_bg"
                    :class="[info.selectValue === item.value ? info.selectValue === info.answer_true ? 'success-card' : 'error-card' : '']">
                    <view class="select_title" :style="{ fontSize: chancefontsize + 'rpx', fontWeight: weight }">
                      {{ item.zIndex }}、<span v-if="isImageUrl(item.options_name)"><img
                          style="width:400rpx;height:400rpx;" :src="item.options_name"> </span>
                      <span v-else>{{ item.options_name }}</span>
                      <!-- {{ item.options_name }} -->
                    </view>
                    <template v-if="info.selectValue && info.selectValue === item.value">
                      <template v-if="info.selectValue === info.answer_true">
                        <image class="success-img" src="/static/icon/check.png" mode=""></image>
                      </template>
                      <template v-else>
                        <image class="error-img" src="/static/icon/close.png" mode=""></image>
                      </template>
                    </template>
                  </view>
                </view>
              </view>
              <!-- 多选题 -->
              <!--
							正确 || 选中   success-card
							错误			  error-card
							-->
              <view v-else @click.stop="doOnclick_good(index + 1)">
                <view v-if="goods_ds.length === 0">
                  <view class="no_select_bg">
                    <view class="select_title" :style="{ fontSize: chancefontsize + 'rpx', fontWeight: weight }">
                      <!-- {{ item.zIndex }}、{{ item.options_name }} -->
                      {{ item.zIndex }}、<span v-if="isImageUrl(item.options_name)"><img
                          style="width:400rpx;height:400rpx;" :src="item.options_name"> </span>
                      <span v-else>{{ item.options_name }}</span>
                    </view>
                  </view>
                </view>
                <view v-else>
                  <view v-if="!isfinish">
                    <view class="no_select_bg success-card" v-if="check_goods_exit(index + 1)">
                      <view class="select_title" :style="{ fontSize: chancefontsize + 'rpx', fontWeight: weight }">
                        <!-- {{ item.zIndex }}、{{ item.options_name }} -->
                        {{ item.zIndex }}、<span v-if="isImageUrl(item.options_name)"><img
                            style="width:400rpx;height:400rpx;" :src="item.options_name"> </span>
                        <span v-else>{{ item.options_name }}</span>
                      </view>
                      <image class="success-img" src="/static/icon/check.png" mode=""></image>
                    </view>
                    <template v-else>
                      <view class="no_select_bg">
                        <view class="select_title" :style="{ fontSize: chancefontsize + 'rpx', fontWeight: weight }">
                          <!-- {{ item.zIndex }}、{{ item.options_name }} -->
                          {{ item.zIndex }}、<span v-if="isImageUrl(item.options_name)"><img
                              style="width:400rpx;height:400rpx;" :src="item.options_name"> </span>
                          <span v-else>{{ item.options_name }}</span>
                        </view>
                      </view>
                    </template>
                  </view>
                  <view v-else>
                    <template v-if="check_goods_exit(index + 1) && iscorrect">
                      <view class="no_select_bg success-card">
                        <view class="select_title" :style="{ fontSize: chancefontsize + 'rpx', fontWeight: weight }">
                          <!-- {{ item.zIndex }}、{{ item.options_name }} -->
                          {{ item.zIndex }}、<span v-if="isImageUrl(item.options_name)"><img
                              style="width:400rpx;height:400rpx;" :src="item.options_name"> </span>
                          <span v-else>{{ item.options_name }}</span>
                        </view>
                        <image class="success-img" src="/static/icon/check.png" mode=""></image>
                      </view>
                    </template>
                    <template v-if="check_goods_exit(index + 1) && !iscorrect">
                      <view class="no_select_bg error-card">
                        <view class="select_title" :style="{ fontSize: chancefontsize + 'rpx', fontWeight: weight }">
                          <!-- {{ item.zIndex }}、{{ item.options_name }} -->
                          {{ item.zIndex }}、<span v-if="isImageUrl(item.options_name)"><img
                              style="width:400rpx;height:400rpx;" :src="item.options_name"> </span>
                          <span v-else>{{ item.options_name }}</span>
                        </view>
                        <image class="error-img" src="/static/icon/close.png" mode=""></image>
                      </view>
                    </template>
                    <template v-if="!check_goods_exit(index + 1)">
                      <view class="no_select_bg">
                        <view class="select_title" :style="{ fontSize: chancefontsize + 'rpx', fontWeight: weight }">
                          <!-- {{ item.zIndex }}、{{ item.options_name }} -->
                          {{ item.zIndex }}、<span v-if="isImageUrl(item.options_name)"><img
                              style="width:400rpx;height:400rpx;" :src="item.options_name"> </span>
                          <span v-else>{{ item.options_name }}</span>
                        </view>
                      </view>
                    </template>
                  </view>
                </view>
              </view>
            </view>
            <!-- 考试 -->
            <view v-else>
              <!-- 单选判断 -->
              <view v-if="info.type_ == '1' || info.type_ == '2'">
                <view class="no_select_bg" :class="[info.selectValue == item.value ? 'success-card' : '']">
                  <view class="select_title" :style="{ fontSize: chancefontsize + 'rpx', fontWeight: weight }">
                    <!-- {{ item.zIndex }}、{{ item.options_name }} -->
                    {{ item.zIndex }}、<span v-if="isImageUrl(item.options_name)"><img
                        style="width:400rpx;height:400rpx;" :src="item.options_name"> </span>
                    <span v-else>{{ item.options_name }}</span>
                  </view>
                  <template v-if="info.selectValue == item.value">
                    <image class="success-img" src="/static/icon/check.png" mode=""></image>
                  </template>
                </view>
              </view>
              <view v-else @click.stop="doOnclick_good(index + 1)">
                <view class="no_select_bg" v-if="goods_ds.length === 0">
                  <view class="select_title" :style="{ fontSize: chancefontsize + 'rpx', fontWeight: weight }">
                    <!-- {{ item.zIndex }}、{{ item.options_name }} -->
                    {{ item.zIndex }}、<span v-if="isImageUrl(item.options_name)"><img
                        style="width:400rpx;height:400rpx;" :src="item.options_name"> </span>
                    <span v-else>{{ item.options_name }}</span>
                  </view>
                </view>
                <view v-else>
                  <view class="no_select_bg success-card" v-if="check_goods_exit(index + 1)">
                    <view class="select_title" :style="{ fontSize: chancefontsize + 'rpx', fontWeight: weight }">
                      <!-- {{ item.zIndex }}、{{ item.options_name }} -->
                      {{ item.zIndex }}、<span v-if="isImageUrl(item.options_name)"><img
                          style="width:400rpx;height:400rpx;" :src="item.options_name"> </span>
                      <span v-else>{{ item.options_name }}</span>
                    </view>
                    <image class="success-img" src="/static/icon/check.png" mode=""></image>
                  </view>
                  <view class="no_select_bg" v-else>
                    <view class="select_title" :style="{ fontSize: chancefontsize + 'rpx', fontWeight: weight }">
                      <!-- {{ item.zIndex }}、{{ item.options_name }} -->
                      {{ item.zIndex }}、<span v-if="isImageUrl(item.options_name)"><img
                          style="width:400rpx;height:400rpx;" :src="item.options_name"> </span>
                      <span v-else>{{ item.options_name }}</span>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view v-if="!examin">
            <view v-if="info.type_ != '3'">
              <view class="an-cell" v-if="info.selectValue != info.istrue && analysis && info.selectValue">
                正确答案: <text class="result-text">{{ info.options[info.result - 1].zIndex }}</text>
              </view>
            </view>
            <view v-else>
              <view class="an-cell" v-if="isfinish && !iscorrect" style="display: flex;">
                正确答案：
                <view v-for="(item, index) in info.istrue" :key="index">
                  <view class="result-text" v-if="item == 1">
                    A
                  </view>
                  <view class="result-text" v-if="item == 2">
                    B
                  </view>
                  <view class="result-text" v-if="item == 3">
                    C
                  </view>
                  <view class="result-text" v-if="item == 4">
                    D
                  </view>
                  <view class="result-text" v-if="item == 5">
                    E
                  </view>
                  <view class="result-text" v-if="item == 6">
                    F
                  </view>
                  <view class="result-text" v-if="item == 7">
                    G
                  </view>
                  <view class="result-text" v-if="item == 8">
                    H
                  </view>
                  <view class="result-text" v-if="item == 9">
                    I
                  </view>
                  <view class="result-text" v-if="item == 10">
                    J
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="!examin" style="margin-top: 20rpx;">
      <!-- 答案解析 -->
      <view v-if="info.type_ != '3'">
        <view class="err-card" v-if="info.selectValue != info.istrue && analysis && info.selectValue">
          <view class="cu-bar bg-white">
            <view class="action">
              <!-- <text class="cuIcon-titles text-green"></text> -->
              <text class="text-xl text-bold">答案解析</text>
            </view>
          </view>
          <view class="mians">
            <u-parse :html="info.explain_" />
          </view>
        </view>
      </view>
      <view v-else>
        <view class="err-card" v-if="isfinish && !iscorrect">
          <view class="cu-bar bg-white">
            <view class="action">
              <!-- <text class="cuIcon-titles text-green"></text> -->
              <text class="text-xl text-bold">答案解析</text>
            </view>
          </view>
          <view class="mians">
            <u-parse :html="info.explain_" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    info: {
      type: Object,
      default () {
        return {
          okInfo: {},
        }
      }
    },
    //	是否展示答案解析
    analysis: {
      type: Boolean,
      default: false
    },
    //	是否为考试
    examin: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      article: '',
      topfontsize: this.$store.state.app.topfontsize,
      chancefontsize: this.$store.state.app.chancefontsize,
      weight: this.$store.state.app.weight
      // goods_ds: this.info.goods_ds,
      // isfinish: false,
      // // 是否正确
      // iscorrect: ''

    }
  },
  computed: {
    subjectName () {
      if (!this.info?.type) return ''
      // const infos = {
      // 	'judge': '判断题',
      // 	'singleChoice': '选择题'
      // }
      // return infos[this.info.type_]
      if (this.info.type_ == '1')
        return '判断题'
      if (this.info.type_ == '2')
        return '选择题'
    },
    goods_ds: {
      get: function () {
        if (this.info.goods_ds != '')
          return this.info.goods_ds
        else
          return []
      },
      set: function () { },
    },
    isfinish: {
      get: function () {
        if (this.info.isfinish != '')
          return this.info.isfinish
        else
          return false
      },
      set: function () { },
    },
    iscorrect: {
      get: function () {
        if (this.info.iscorrect != '')
          return this.info.iscorrect
        else
          return ''
      },
      set: function () { },
    },
    isResult () {
      if (!this.info?.selectValue) return ''
      const isRe = this.info.options.some(el => {
        return el.value === this.info.selectValue && el.result
      })
      return isRe
    }
  },
  methods: {
    bigimg () {
      uni.previewImage({
        current: 0, //预览图片的下标
        urls: [this.info.question_image] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
      })
    },
    //多选分类
    doOnclick_good (value) {
      var exit = false;
      if (this.info.isfinish && !this.examin) {
        return
      }
      if (this.info.goods_ds.includes(value)) {
        /*根据值删除*/
        Array.prototype.contains = function (obj) {
          var i = this.length;
          while (i--) {
            if (this[i] === obj) {
              return i;
            }
          }
          return false;
        }
        this.info.goods_ds.splice(this.info.goods_ds.contains(value), 1)
        exit = true;
      }
      if (exit) { } else if (!exit) {
        this.info.goods_ds.push(value)
      }

      if (this.examin) {
        // console.log('goods_ds:' + this.info.goods_ds)
        this.$forceUpdate()
        console.log('istrue1' + JSON.stringify(this.info))
        //判断多选是否全对
        this.info.iscorrect = false
        this.info.isfinish = true
        if (this.info.goods_ds.length == this.info.istrue.length) {
          const isArrEqual = (arr1, arr2) => {
            return arr1.length === arr2.length && arr1.every((ele) => arr2.includes(ele));
          };
          this.iscorrect = isArrEqual(this.info.goods_ds, this.info.istrue)
          this.info.iscorrect = isArrEqual(this.info.goods_ds, this.info.istrue)
          this.isfinish = true
          this.info.isfinish = true
        }

        let option_len = this.info.options.filter(i => i.options_name !== null).length
        if (this.info.goods_ds.length == option_len) {
          this.$emit('change', this.info.goods_ds, this.info)
        } else {
          this.$emit('change', this.info.goods_ds, this.info, false)
        }
      } else {
        // console.log(this.info.goods_ds.length)
        this.$forceUpdate()
        // console.log(this.info)
        //判断多选是否全对
        if (this.info.goods_ds.length == this.info.istrue.length) {
          // const isResult = item.options.some(el => el.value == e && el.result)
          const isArrEqual = (arr1, arr2) => {
            return arr1.length === arr2.length && arr1.every((ele) => arr2.includes(ele));
          };
          this.iscorrect = isArrEqual(this.info.goods_ds, this.info.istrue)
          this.info.iscorrect = isArrEqual(this.info.goods_ds, this.info.istrue)
          this.isfinish = true
          this.info.isfinish = true
          this.$emit('change', this.info.goods_ds, this.info)
        }
      }

      return exit;
    },
    //判断选中
    check_goods_exit (value) {
      if (this.goods_ds.includes(value)) {
        return true;
      } else {
        return false;
      }
    },
    radioChange (e) {
      if (this.info.selectValue && !this.examin) return
      this.$emit('change', e)
    },
    isImageUrl (url) {
      let imageRegex = /\.(jpeg|jpg|gif|png|webp)$/
      return imageRegex.test(url)
    }
  }
}
// function isImageUrl(url:string) {
// 	const imageRegex = /\.(jpeg|jpg|gif|png|webp)$/;
// 	return imageRegex.test(url);
// }
</script>

<style lang="scss" scoped>
.err-card {
  margin: 20rpx 24rpx 0 24rpx;
  width: 702rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  overflow: hidden;
}

.subject {
  margin: 0 24rpx;
  width: 702rpx;
  min-height: 575rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  overflow: hidden;
  position: relative;

  &-header {
    padding: 19rpx 14rpx;
    min-height: 70rpx;

    .tagStats {
      position: absolute;
      top: 20rpx;
      left: 0;
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      background: #01CB88;
      border-radius: 0 26rpx 26rpx 0;
      padding: 6rpx 20rpx;
    }
  }

  .content {
    padding: 19rpx 14rpx;

    .title {
      font-size: 33rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #2D3341;
      line-height: 50rpx;
    }

    .radios {
      margin-top: 94rpx;

      .radio {
        width: 34rpx;
        height: 34rpx;
        border: 3rpx solid #838A9D;
        border-radius: 50%;

        &-n {
          width: 18rpx;
          height: 18rpx;
          background: #36c269;
          border-radius: 50%;

          &-err {
            width: 18rpx;
            height: 18rpx;
            background: #FF0000;
            border-radius: 50%;
          }
        }
      }

      .active {
        border-color: #36c269;

        &-err {
          border-color: #FF0000;
        }
      }

      .activeName {
        color: #36c269;

        &-err {
          color: #FF0000;
        }
      }

      .cell {
        padding: 0 30rpx;

        &:not(:first-child) {
          margin-top: 30rpx;
        }

        .name {
          flex: 1 0 0;
          width: 0;
          font-size: 38rpx;
          margin-left: 20rpx;
        }
      }

      .an-cell {
        width: 621rpx;
        border-radius: 6rpx;
        margin: 56rpx auto 0 auto;
        padding: 15rpx 22rpx;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #2D3341;

        .result-text {
          margin-left: 10rpx;
          color: #03BE7A;
        }
      }
    }
  }
}

.mians {
  padding: 10rpx 30rpx 20rpx 30rpx;
  font-size: 32rpx;
}

.no_select_bg {
  display: flex;
  align-items: center;
  background-color: #F8F8F8;
  border-radius: 16rpx;
  padding: 26rpx 10rpx;

  .select_title {
    flex: 1;
    font-size: 38rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-left: 24rpx;
    margin-right: 20rpx;
  }

  .success-img {
    width: 44.56rpx;
    height: 31.32rpx;
    margin-right: 10rpx;
  }

  .error-img {
    width: 29.25rpx;
    height: 29.25rpx;
    margin-right: 10rpx;
  }
}

.success-card {
  background-color: #DEFFF3;
  border: 1rpx solid #03BE7A;

  .select_title {
    color: #03BE7A;
  }
}

.error-card {
  background-color: #FFF0F0;
  border: 1rpx solid #FF0000;

  .select_title {
    color: #FF0000;
  }
}

.content_img {
  width: 500rpx;
  height: auto;
  margin-top: 24rpx;
  border-radius: 16rpx;
}
</style>